<template>
    <div class="goodsBar grid grid grid-cols-2 gap-4 p-4 bg-zinc-100">
      <div 
        v-for="(product, index) in products" 
        :key="index" 
        class="goods bg-white p-4 rounded-lg shadow w-25 h-28"
      >
        <img :src="product.image" :alt="product.title" class="w-full w-20 h-20 object-cover mb-4">
        <h3 class="text-lg font-bold mb-2">{{ product.title }}</h3>
        <p class="text-zinc-600 mb-2">{{ product.description }}</p>
        <div class="flex items-center mb-2">
          <span class="text-red-500 text-xl font-bold">{{ product.price }}</span>
          <span v-if="product.oldPrice" class="text-zinc-500 line-through ml-2">{{ product.oldPrice }}</span>
        </div>
        <div v-if="product.badges.length" class="flex space-x-2">
          <span 
            v-for="(badge, badgeIndex) in product.badges" 
            :key="badgeIndex" 
            class="inline-block bg-orange-500 text-white px-2 py-1 text-xs rounded"
          >{{ badge }}</span>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        products: [
        {
            image: 'https://placehold.co/200x200',
            title: '大吸力车载吸尘器',
            description: '口袋金刚吹吸宝S1车载吸尘器',
            price: '¥399',
            oldPrice: '¥499',
            badges: ['HOT']
        },
        {
            image: "https://placehold.co/200x200",
            title: "高清降噪蓝牙耳机",
            description: "真无线设计，智能触控，长久续航",
            price: "¥299",
            oldPrice: "¥399",
            badges: ["热销", "买一赠一"]
        },
        {
            image: "https://placehold.co/200x200",
            title: "智能语音助手",
            description: "家居控制，语音查询，生活小能手",
            price: "¥99",
            oldPrice: null,
            badges: ["智能家居", "限时折扣"]
        },
        {
            image: "https://placehold.co/200x200",
            title: "便携式咖啡机",
            description: "一键操作，随时随地享受醇香咖啡",
            price: "¥199",
            oldPrice: "¥249",
            badges: ["新品推荐", "旅行必备"]
        },
        {
            image: "https://placehold.co/200x200",
            title: "环保购物袋套装",
            description: "可重复使用，多种颜色，时尚又实用",
            price: "¥39",
            oldPrice: null,
            badges: ["绿色环保", "满额包邮"]
        },
        {
            image: "https://placehold.co/200x200",
            title: "高清行车记录仪",
            description: "夜视功能，广角镜头，守护每一段旅程",
            price: "¥259",
            oldPrice: "¥329",
            badges: ["安全驾驶", "限时直降"]
        }
        ]
      };
    },
  };
  </script>
  
<style>
@import "https://cdn.jsdelivr.net/npm/tailwindcss@^2/dist/tailwind.min.css";
.goods{
    margin: 5rem 0 5rem 0;
}
.goodsBar{
    margin: 0 0 10rem 0;
}
</style>